<template>
  <!-- 修复管理组件 -->
  <div class="vxe_box">
    <div>
      <div :class="imgStyle" @click="toggleCollapse()">
        <img src="@/assets/images/亮色风格图集/向右.png" alt="" />
      </div>
    </div>
    <transition name="fade">
      <div v-if="isCollapse" style="width: 350px; height: 575px">
        <div class="detect_box_title">修复</div>
        <div class="XF_second">
          <vxe-input
            clearable
            v-model="demo1.value400"
            placeholder="请输入完整要素编码"
            type="search"
            @search-click="searchIDXF"
          ></vxe-input>
        </div>
        <!--  -->
        <div class="third_line">
          <span class="third_line_a">是否显示图层:</span>
          <div class="el-span">
            <el-switch v-model="value2" @change="switchMapXF" />
          </div>

          <button value="查询" @click="getInfoXF">查询</button>
          <el-progress
            :percentage="percentage"
            color="#409eff"
            class="jdt_nr"
            v-show="jdt"
          ></el-progress>
        </div>
        <div class="vxe_table_box">
          <vxe-table
            stripe
            show-overflow
            :loading="loading"
            height="380"
            :header-row-style="{
              background: '#26a1ff',
              color: '#fff',
              height: 20,
            }"
            :sync-resize="demo1.value9"
            :data="tableDataXF"
            :row-config="{ isCurrent: true, isHover: true, height: 30 }"
            :column-config="{ resizable: true }"
            :tree-config="{
              transform: true,
              rowField: 'featId',
              parentField: 'eidPlus',
            }"
            @current-change="handleRowClick"
            ref="xTable"
          >
            <vxe-column
              field="featId"
              title="要素编码"
              width="150"
              tree-node
            ></vxe-column>
            <vxe-column
              field="handleTarget"
              title="处理对象"
              width="100"
            ></vxe-column>
            <vxe-column
              field="handleType"
              title="处理类型"
              width="150"
            ></vxe-column>
            <vxe-column
              field="defectName"
              title="缺陷名称"
              width="150"
            ></vxe-column>
            <vxe-column
              field="defectPosition"
              title="缺陷位置"
              width="150"
            ></vxe-column>
            <vxe-column
              field="defectLevel"
              title="缺陷级别"
              width="100"
            ></vxe-column>
            <vxe-column
              field="handleTime"
              title="处理日期"
              width="150"
            ></vxe-column>
            <vxe-column
              field="handleLength"
              title="处理长度"
              width="100"
            ></vxe-column>
            <vxe-column
              field="pipeSection"
              title="管段长度"
              width="150"
            ></vxe-column>
            <vxe-column
              field="handleMode"
              title="处理方式"
              width="150"
            ></vxe-column>
            <vxe-column
              field="handleContent"
              title="处理内容"
              width="150"
            ></vxe-column>

            <vxe-column
              field="handleCompany"
              title="处理单位"
              width="150"
            ></vxe-column>
            <vxe-column
              field="location"
              title="所在位置"
              width="150"
            ></vxe-column>
            <vxe-column
              field="districtTown"
              title="所属区镇"
              width="150"
            ></vxe-column>
            <vxe-column field="type" title="归属类型" width="150"></vxe-column>
          </vxe-table>
        </div>

        <div class="open_btns">
          <button @click="openPicXF">修复图片</button>
          <button @click="openReportXF">修复报告</button>
          <button @click="openVideoXF">修复视频</button>
        </div>
      </div>
    </transition>
  </div>
  <div class="picPop">
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value12"
      width="650"
      height="500"
    >
      <template #title>
        <div>图片</div>
      </template>
      <template #default>
        <div class="guild_img_box">
          <div v-show="single">
            <img
              v-viewer
              :src="testPhotoUrl"
              alt=""
              style="height: 100%; width: 100%"
            />
          </div>
          <div v-show="poly" class="poly">
            <el-carousel>
              <el-carousel-item v-for="item in images" :key="item.id">
                <img
                  :src="item.originalUrl + item.pic"
                  class="bannerimg"
                  style="height: 100%; width: 100%"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value11"
      width="800"
      height="500"

    >
      <template #title>
        <div style="font-size: 22px">报告</div>
      </template>
      <template #default>
        <div class="testReport" style="width: 100%; height: 100%">
          <iframe :src="testReportUrl" width="100%" height="100%">
            该浏览器无法支持PDF,请点击查看：
            <a :href="testReportUrl">下载 PDF</a>
          </iframe>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value10"
      width="800"
      height="500"
    
    >
      <template #title>
        <div>
          <span style="margin-right: 25px; margin-left: 15px">视频</span>
          <!-- 下拉菜单 -->
          <el-select
            v-model="movieValue"
            class="m-2"
            placeholder="下拉视频"
            @change="movieChange"
          >
            <el-option
              v-for="item in movieOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>
      <template #default>
        <div style="width: 100%; height: 100%">
          <embed width="100%" height="100%" :src="testVideoUrl" />
        </div>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
}
</script>
<script setup>
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import { onMounted, ref, toRaw, defineComponent, reactive, watch } from 'vue'
import { VXETable } from 'vxe-table'
import Icon from 'ol/style/Icon.js'
import { require } from '@/utils/require'
import XEUtils from 'xe-utils'
import {
  getJCGLInfo,
  getJCGLSearch,
  getJCWhole,
  getXFSearch,
  getXFInfo,
  getSpatialInfo,
  getPipePointInfo,
  getPipeInfo,
} from '@/api/index'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 引入echarts
import * as echarts from 'echarts'
//测试用菠萝存储地图容器
import { userMap, mapStyle, switchList2 } from '../../store/index'
let map = userMap() //接收
let storeStyle = mapStyle() //接受样式
let storeSwitch = switchList2()
let switchOpinion
let list
let switchStyle
// 空间查询树控件飞行图层-线
let treeLineLayer
let treeLineSource
let treeLineFeature
// 单线起点
let PipeXsource
let PipeXLayer
let PipeXFeature
// 单线终点
let PipeYsource
let PipeYLayer
let PipeYFeature
// 单线缓冲区
let PipeLinesource
let PipeLineLayer
let PipeLineFeature
// 时间内全部管线
let Pipesource
let PipeLayer
let PipeFeature
// 控制选中信息
const JCGL_flag = ref(false)
const XFGL_flag = ref(false)
const KJCX_flag = ref(false)
// 控制弹窗信息
const imgStyle = ref({
  go: false,
  aa: true,
})
const tableDataXF = ref([])
// 检测进度条
const loadingJC = ref(false)
// 修复进度条
const loading = ref(true)
// input时间信息
const start_time_choose = ref()
const end_time_choose = ref()
const demo1 = reactive({
  // 检测管理
  value5: false,
  value6: false,
  value7: false,
  value8: false,
  value300: '',
  // 修复管理
  value9: false, //弹窗与表单
  value10: false, //视频
  value11: false, //报告
  value12: false, //图片
  value400: '', //input框
})
// 检测管理分页
const tablePage = reactive({
  currentPage: 1,
  pageSize: 13,
  totalResult: 0,
})
// 缺陷等级
const defectLevel = ref("'1','2','3','4'")
// 多选框信息
const checkAll = ref(true)
const isIndeterminate = ref(true)
const checkedCities = ref(['1级', '2级', '3级', '4级'])
const cities = ['1级', '2级', '3级', '4级']

// 改变地图容器大小
const showChange = ref(false)
const changeContainer = () => {
  if (showChange.value == true) {
    console.log(222)
    showChange.value = false
    switchStyle.style.width = '100vw'
    switchStyle.style.position = 'fixed'
    switchStyle.style.right = '0px'
    list.getView().setCenter([24632, 69653])
  } else {
    console.log(111)
    switchStyle.style.width = '50vw'
    switchStyle.style.position = 'fixed'
    switchStyle.style.right = '0px'
    showChange.value = true
    list.getView().setCenter([70000, 69653])
  }

  // console.log(mapOL.value.style.width)
}
onMounted(() => {
  list = toRaw(map.map)
  switchStyle = toRaw(storeStyle.map_style)
  storeSwitch.repairSwitch = isCollapse.value
  // console.log('获取样式', switchStyle)
  openList()
  // 线要素的起点图层
  PipeXsource = new VectorSource({
    wrapX: false,
  })
  PipeXLayer = new VectorLayer({
    source: PipeXsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 1,
        fill: new Fill({
          color: '#ff0000',
        }),
      }),
    }),
  })
  list.addLayer(PipeXLayer)
  // 线要素的终点图层
  PipeYsource = new VectorSource({
    wrapX: false,
  })
  PipeYLayer = new VectorLayer({
    source: PipeYsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 1,
        fill: new Fill({
          color: '#ff0000',
        }),
      }),
    }),
  })
  list.addLayer(PipeYLayer)
  // 线要素缓冲区图层(单线)
  PipeLinesource = new VectorSource({
    wrapX: false,
  })
  PipeLineLayer = new VectorLayer({
    source: PipeLinesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      // stroke: new Stroke({
      //   color: [0, 0, 0, 1],
      //   width: 5,
      // }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLineLayer)
  // 空间查询图层--飞行--线
  treeLineSource = new VectorSource({
    wrapX: false,
  })
  treeLineLayer = new VectorLayer({
    source: treeLineSource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 4,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(treeLineLayer)
  // 全部图层的显隐
  Pipesource = new VectorSource({
    wrapX: false,
  })
  PipeLayer = new VectorLayer({
    source: Pipesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 3,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLayer)
})

const jdt = ref(false)
const percentage = ref(0)
const timeStart = ref('进度条计时')
const pipeArr = ref(null)
const openList = () => {
  // 进度条显示
  jdt.value = true
  getXFInfo().then((res) => {
    // 进度条值
    percentage.value = 100
    // 分割线
    // console.log(res.data)
    if (res.data) {
      const arr = res.data
      const _arr = []
      for (let i = 0; i < arr.length; i++) {
        const url = arr[i].eid
        const index = url.lastIndexOf('-')
        const str = url.substring(index + 1, url.length)
        if (str != 'null') {
          const value = arr[i].location + '/' + str
          _arr.push(Object.assign({}, arr[i], { eidPlus: value }))
        }
      }

      const obj = XEUtils.groupBy(arr, 'region')
      const arrList = Object.keys(obj)
      for (let i = 0; i < arrList.length; i++) {
        if (arrList[i] != 'null' && arrList[i] != 'undefined') {
          const obj2 = {
            featId: arrList[i],
          }
          _arr.push(obj2)
        }
      }
      const obj3 = XEUtils.groupBy(_arr, 'region')
      const result = []
      const result2 = []
      const result3 = []
      XEUtils.each(obj3, (childs, key) => {
        XEUtils.each(
          XEUtils.groupBy(childs, 'handleCompany'),
          (childs2, key2) => {
            if (key2 != 'undefined' && key2 != 'null' && key != 'null') {
              result2.push({
                featId: key2,
                eidPlus: key,
              })
              _arr.push({
                featId: key2,
                eidPlus: key,
              })
            }
            XEUtils.each(
              XEUtils.groupBy(childs2, 'eidPlus'),
              (childs3, key3) => {
                if (key3 != 'undefined' && key3 != 'null' && key2 != 'null') {
                  result3.push({
                    featId: key3,
                    eidPlus: key2,
                  })
                  _arr.push({
                    featId: key3,
                    eidPlus: key2,
                  })
                }
              }
            )
          }
        )
      })
      // console.log('XFresult2', result2)
      // console.log('XFresult3', result3)
      const _arr2 = []
      // for (let i = 0; i < _arr.length; i++) {
      //   if (_arr[i].handleCompany == undefined) {
      //     console.log('数据为空', _arr[i])
      //   }
      // }
      tableDataXF.value = _arr
      // console.log('XFarr', _arr)
      // 分割线
      const a6 = res.data
      const a7 = []
      a6.forEach((value) => {
        a7.push([
          [value.testingStartX, value.testingStartY],
          [value.testingEndX, value.testingEndY],
        ])
      })
      // console.log('管线数组', a7)
      pipeArr.value = a7
      jdt.value = false
      loading.value = false
    } else {
      console.log('没有权限数据')
      jdt.value = false
      loading.value = false
    }
  })
}
// 进度条方法
const increase = () => {
  timeStart.value = setInterval(() => {
    if (percentage.value < 95) {
      percentage.value += 5
    }
    if (percentage.value > 100) {
      percentage.value = 100
    }
  }, 30)
}
const increaseend = () => {
  percentage.value = 100
  clearInterval(timeStart.value)
  jdt.value = false
}
watch(jdt.value, (value, newValue) => {
  console.log(value + '----newValue----' + newValue)
  if (value) {
    that.increase()
  } else {
    that.increaseend()
  }
})
// 修复菜单折叠
const isCollapse = ref(true)
watch(
  storeSwitch,
  () => {
    switchOpinion = toRaw(storeSwitch.opinionBtn)
    if (switchOpinion == true) {
      toggleCollapse()
      storeSwitch.opinionBtn = false
    } else {
      console.log('switchOpinion', switchOpinion)
    }
  },
  {
    immediate: true,
  }
)
const toggleCollapse = () => {
  if (isCollapse.value == true) {
    isCollapse.value = false
    storeSwitch.repairSwitch = isCollapse.value
    imgStyle.value = {
      go: true,
      aa: false,
    }
  } else {
    isCollapse.value = true
    storeSwitch.repairSwitch = isCollapse.value
    imgStyle.value = {
      go: false,
      aa: true,
    }
  }
}

// 修复搜索
const getInfoXF = () => {
  // console.log(demo1.value400)
  getXFSearch(demo1.value400).then((res) => {
    // console.log(res.data)
    const arr = res.data
    const _arr = []
    for (let i = 0; i < arr.length; i++) {
      const url = arr[i].eid
      const index = url.lastIndexOf('-')
      const str = url.substring(index + 1, url.length)
      if (str != 'null') {
        const value = arr[i].location + '/' + str
        _arr.push(Object.assign({}, arr[i], { eidPlus: value }))
      }
    }

    const obj = XEUtils.groupBy(arr, 'region')
    const arrList = Object.keys(obj)
    for (let i = 0; i < arrList.length; i++) {
      if (arrList[i] != 'null' && arrList[i] != 'undefined') {
        const obj2 = {
          featId: arrList[i],
        }
        _arr.push(obj2)
      }
    }
    const obj3 = XEUtils.groupBy(_arr, 'region')
    const result = []
    const result2 = []
    const result3 = []
    XEUtils.each(obj3, (childs, key) => {
      XEUtils.each(
        XEUtils.groupBy(childs, 'handleCompany'),
        (childs2, key2) => {
          if (key2 != 'undefined' && key2 != 'null' && key != 'null') {
            result2.push({
              featId: key2,
              eidPlus: key,
            })
            _arr.push({
              featId: key2,
              eidPlus: key,
            })
          }
          XEUtils.each(XEUtils.groupBy(childs2, 'eidPlus'), (childs3, key3) => {
            if (key3 != 'undefined' && key3 != 'null' && key2 != 'null') {
              result3.push({
                featId: key3,
                eidPlus: key2,
              })
              _arr.push({
                featId: key3,
                eidPlus: key2,
              })
            }
          })
        }
      )
    })
    // console.log('XFresult2', result2)
    // console.log('XFresult3', result3)

    tableDataXF.value = _arr
    // console.log('XFarr', _arr)
    //  分割线
    const a3 = res.data
    const a4 = []
    a3.forEach((value) => {
      a4.push([
        [value.testingStartX, value.testingStartY],
        [value.testingEndX, value.testingEndY],
      ])
    })
    console.log('管线数组', a4)
    pipeArr.value = a4
  })
}
// 点击取到每行的数据
const xTable = ref()
const testingStartX = ref()
const testingStartY = ref()
const testingEndX = ref()
const testingEndY = ref()
const baseUrl = ref('https://ks.qichenginfo.com/JianCeData')
const region = ref()
const testingCompany2 = ref()
const eid = ref()
const testingPhoto = ref()
const testingVideo = ref()
const testingReport = ref()
const testPhotoUrl = ref()
const testPhoto = ref()
const testVideoUrl = ref()
const testVideo = ref()
const testReportUrl = ref()
// 修复地址
const XFurl = ref()
const XFpic = ref()
const XFreport = ref()
const XFvideo = ref()
const XFeid = ref()
// 点击单行的操作(飞行与显示点线)
const handleRowClick = (rowIndex) => {
  console.log('rowIndex', xTable.value)
  const $table = xTable.value
  // console.log($table.getCurrentRecord())
  const record = $table.getCurrentRecord()
  const Data = JSON.parse(JSON.stringify(record))

  if (Data && Data.children.length == 0) {
    console.log('单击飞行', Data)
    // 判断如果之前已经有要素先清空
    const stArr = treeLineLayer.getSource().getFeatures().length
    if (stArr != 0) {
      treeLineSource.clear()
      console.log('清除线')
    }
    // 坐标
    testingStartX.value = Data.testingStartX
    testingStartY.value = Data.testingStartY
    testingEndX.value = Data.testingEndX
    testingEndY.value = Data.testingEndY
    // 修复
    XFurl.value = Data.path //检测共用
    XFpic.value = Data.handlePhoto
    XFreport.value = Data.handleReport
    XFvideo.value = Data.handleVideo
    XFeid.value = Data.eid //检测共用
    // 检测
    testPhoto.value = Data.testingPhoto
    testVideo.value = Data.testingVideo
    testReportUrl.value = Data.testingReport

    // 加载起点要素
    PipeXFeature = new Feature({
      geometry: new Point([testingStartX.value, testingStartY.value]),
    })
    if (PipeXFeature.getGeometry() != null) {
      PipeXsource.clear()
    }
    PipeXsource.addFeature(PipeXFeature)
    // 加载终点要素
    PipeYFeature = new Feature({
      geometry: new Point([testingEndX.value, testingEndY.value]),
    })
    if (PipeYFeature.getGeometry() != null) {
      PipeYsource.clear()
    }
    PipeYsource.addFeature(PipeYFeature)
    // 加载缓冲区--只有4326可以使用turf
    const arrKSZB = [
      [testingStartX.value, testingStartY.value],
      [testingEndX.value, testingEndY.value],
    ]
    let arr4326 = arrKSZB.map((item) => {
      return transform(item, 'EPSG:KSZB', 'EPSG:4326')
    })
    const lineString = turf.lineString(arr4326)
    // console.log('缓冲区', lineString)
    // 0.1米=0.00006214 英里
    // 0.5米=0.0003107 英里
    const buffer = turf.buffer(lineString, 0.0003107, { units: 'miles' })
    let buffered = buffer.geometry.coordinates[0]
    let testarr = buffered.map((item) => {
      return transform(item, 'EPSG:4326', 'EPSG:KSZB')
    })
    // console.log(testarr)
    PipeLineFeature = new Feature({
      type: 'Polygon',
      geometry: new Polygon([testarr]),
    })
    if (PipeLineFeature.getGeometry() != null) {
      PipeLinesource.clear()
    }
    // PipeLinesource.addFeature(PipeLineFeature)
    // 直接跳转镜头方法
    console.log([Data.startId, Data.endId])
    treeLineFeature = new Feature({
      geometry: new LineString([
        [testingStartX.value, testingStartY.value],
        [testingEndX.value, testingEndY.value],
      ]),
      attributes: [[Data.startId], [Data.endId]],
      attributes2: [Data.featId],
      PointAX: [testingStartX.value, testingStartY.value],
      PointX: [testingEndX.value, testingEndY.value],
    })

    treeLineSource.addFeature(treeLineFeature)
    list.getView().setZoom(9)

    list.getView().setCenter([testingStartX.value, testingStartY.value])
  } else {
    console.log('暂无数据')
  }
}

// featID关键字查询(修复)
const searchIDXF = (value) => {
  getInfoXF()
}
//展开图片(修复)--挂轮播图
const single = ref(true)
const poly = ref(false)
const originalUrl = ref()
const images = ref([])
const openPicXF = () => {
  demo1.value12 = true
  if (XFpic.value) {
    if (XFpic.value.includes('/') == false) {
      single.value = true
      poly.value = false
      testPhotoUrl.value = XFurl.value + XFeid.value + '/' + XFpic.value
      console.log('单张图片', XFpic.value)
    } else if (XFpic.value.includes('/') == true) {
      originalUrl.value = XFurl.value + XFeid.value + '/'
      single.value = false
      const a2 = XFpic.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { id: i, pic: a2[i], originalUrl: originalUrl.value }
        a22.push(obj)
      }
      images.value = a22
      console.log('多张图片', XFpic.value)
      poly.value = true
    } else {
      testPhotoUrl.value = 'https://temp.im/200x200'
    }
  } else {
    console.log('未选中')
  }
}
//展开报告(修复)
const openReportXF = () => {
  demo1.value11 = true
  if (XFreport.value) {
    testReportUrl.value = XFurl.value + XFeid.value + '/' + XFreport.value
    console.log(testReportUrl.value)
  } else {
    console.log('未选中')
  }
}
//展开视频(修复)
const movieValue = ref('')
const movieOptions = ref([])
const openVideoXF = () => {
  demo1.value10 = true
  if (XFvideo.value) {
    if (XFvideo.value.includes('/') == false) {
      testVideoUrl.value = XFurl.value + XFeid.value + '/' + XFvideo.value
      console.log('单个视频', XFvideo.value)
    } else if (XFvideo.value.includes('/') == true) {
      originalUrl.value = XFurl.value + XFeid.value + '/'
      const a2 = XFvideo.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { value: a2[i], label: a2[i] }
        a22.push(obj)
      }
      movieOptions.value = a22
      // 默认加载第一个视频
      testVideoUrl.value = originalUrl.value + a2[0]
      console.log('多个视频', movieOptions.value)
    } else {
      console.log('无权限视频')
    }
    console.log(testVideoUrl.value)
  } else {
    console.log('未选中')
  }
}
// 多个视频选择栏
const movieChange = (val) => {
  console.log(val)
  testVideoUrl.value = originalUrl.value + val
}
// 修复开关
const value2 = ref(false)
const switchMapXF = () => {
  if (value2.value == true) {
    const a8 = pipeArr.value
    const a9 = toRaw(a8)
    console.log('开', a9)
    for (let i = 0; i < a9.length; i++) {
      PipeFeature = new Feature({
        geometry: new LineString([a9[i][0], a9[i][1]]),
      })
      Pipesource.addFeature(PipeFeature)
    }
  } else if (value2.value == false) {
    console.log('关')
    Pipesource.clear()
  } else {
    console.log('报错')
  }
}
</script>
<style lang="less" scoped>
//修复菜单栏
// 标题
.detect_box_title {
  text-align: center;
  background: url('@/assets/images/亮色风格图集/矩形 3.png') no-repeat center
    0px;
  background-position: center -14px;
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #c8fdff;
  font-size: 18px;
  font-weight: 600;
  color: #078dff;
}
/* 修复底部按钮组 */
.open_btns {
  position: absolute;
  right: 15px;
  bottom: 18px;
}
.open_btns button {
  margin: 0 5px 0 0;
  padding: 0;
  width: 75px;
  height: 22.8167px;
  border-radius: 10px;
  border: 1px solid #2ba3ff;
  color: #2ba3ff;
}
/* 折叠菜单 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  transform: translateX(-350px);
}
// 旋转按钮
.aa {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  right: -8px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.aa img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
}
.go {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  // right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.go img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
  transform: rotate(180deg);
}

// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
  :deep(.el-carousel__container) {
    height: 400px;
  }
}
// 图片弹窗头
.picPop {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }
}
// 管理弹窗头
.vxe_box {
  // :deep(.vxe-modal--wrapper .vxe-modal--header) {
  //   background: url(../.././assets/images/k_db.png) 0px 0px / 100% 100%
  //     no-repeat !important;
  // }
  // :deep(.vxe-modal--header-right) {
  //   color: #fff;
  //   transform: translateY(5%);
  //   font-size: 18px;
  // }
  // 修改input
  :deep(.vxe-input) {
    display: inline-block;
    position: relative;
    width: 310px;
    margin: 15px;
  }
  :deep(.vxe-input .vxe-input--search-icon) {
    color: #1c9cfe;
  }
  // 修改表头
  :deep(thead) {
    font-size: 13px;
    height: 10px;
  }
  :deep(tbody) {
    font-size: 13px;
  }
  :deep(.vxe-header--column) {
    line-height: 5px;
  }
  :deep(.body--wrapper) {
    scrollbar-color: #d8d8d8 #e9e9e9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.body--wrapper::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
    border: 1px solid #e9e9e9;
  }
  :deep(.body--wrapper::-webkit-scrollbar-thumb) {
    background-color: #d8d8d8;
    // border: 1px dashed #888888;
    width: 4px;
    height: 150px;
  }
}
.JC_title span {
  font-size: 20px;
}
// 检测弹窗选项
.first_line {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.first_line span {
  margin-right: 20px;
}
.second_line {
  font-size: 18px;
  margin-top: 7px;
  display: flex;
  justify-content: space-around;
  padding: 0 50px;
}
.third_line {
  font-size: 13.5px;
  font-weight: 500;
  width: 350px;
  // background: #e0dbdb;
  padding: 0 15px;
}
.third_line_a {
  display: inline-block;
  margin-right: 20px;
  transform: translateY(-5px);
}
.third_line button {
  position: absolute;
  right: 24px;
  top: 19.1%;
  margin: 0;
  padding: 0;
  width: 50px;
  border-radius: 10px;
  border: 1px solid #2ba3ff; //自定义边框
  color: #2ba3ff;
}
.el-span {
  display: inline-block;
  margin-right: 30px;
  transform: translateY(-5px);
}

// 修复
.XF_first_line {
  float: right;
  width: 950px; //修改进度条宽度
}
.XF_first_line_a {
  margin-left: 300px;
}
.XF_first_line span {
  margin-right: 20px;
}
.XF_second_line {
  display: inline-block;
  margin-right: 30px;
}

.vxe-button.type--button {
  float: right;
}
// 折叠按钮
.foldable_btn {
  float: right;
  margin-top: 0.5%;
}
/* 
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.testReport {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}

.testReport > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}
</style>
